<template>
  <div style="padding: 0 25px">
    <div v-if="score">
      <span style="vertical-align: middle; margin-right: 10px">
        整体评价：
      </span>
      <div style="display: inline-block; vertical-align: middle">
        <span v-for="(item, index) in score"
              :key="index"
              class="star-five"></span>
        <span v-for="(item, index) in 5 - score"
              :key="'gray' + index"
              class="star-five gray">
        </span>
      </div>
    </div>
    <div v-if="scoreRemarks"
         class="remark-sty">
      {{scoreRemarks}}
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderSignScore",
  props: {
    value: {
      type: Number
    },
    scoreLabelDesc: {
      type: String,
      default: null
    },
    scoreDesc: {
      type: String,
      default: null
    }
  },
  data () {
    return {};
  },
  computed: {
    score () {
      if (!this.value) {
        return 0;
      }
      const score = this.value;
      if (score > 0 && score <= 5) {
        return score;
      }
      return 0;
    },
    scoreRemarks () {
      // const remarkString = scoreLabel ? scoreLabel.split(",") : [];
      return `${this.scoreLabelDesc || ''}${this.scoreLabelDesc && this.scoreDesc ? "，" : ''}${this.scoreDesc || ''}`
    }
  }
};
</script>

<style lang="scss" scoped>
.star-five {
  margin: 20px 0;
  position: relative;
  display: inline-block;
  color: var(--prev-color-primary);
  width: 0px;
  height: 0px;
  margin-right: 15px;
  border-right: 9px solid transparent;
  border-bottom: 7px solid var(--prev-color-primary);
  border-left: 9px solid transparent;
  -moz-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);

  &::before {
    border-bottom: 9px solid var(--prev-color-primary);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -5px;
    left: -5.8px;
    display: block;
    content: "";
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
  }

  &::after {
    position: absolute;
    display: block;
    color: var(--prev-color-primary);
    top: 0;
    left: -9.5px;
    width: 0px;
    height: 0px;
    border-right: 9px solid transparent;
    border-bottom: 7px solid var(--prev-color-primary);
    border-left: 9px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    content: "";
  }

  &.gray {
    color: #aaa !important;
    border-bottom-color: #aaa !important;

    &::before {
      border-bottom-color: #aaa !important;
    }

    &::after {
      color: #aaa !important;
      border-bottom-color: #aaa !important;
    }
  }
}
.remark-sty {
  padding: 5px 0 0;
  word-break: break-all;
}
</style>
